<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            background: grey;
        }
    </style>
</head>

<body>
    <!-- 写在标签内 和标签名以一个空格分隔的叫做属性 (属性名="属性值") -->
    <div class="one" title="hello">11111</div>
</body>
<script>
    // JS组成
    // ECMAScript  => 语法(ES5   =>  ES6)
    // BOM     提供了操作浏览器的接口和方法 (window -> document location history navigator screen)
    // DOM     提供了操作文档的接口和方法    获取元素 操作元素(改变元素 内容 属性 样式 绑定事件) 增删改


    // HTML DOM =>  关于HTML元素的增删改查

    // DOM节点
    // 文档 => 文档节点document
    // html元素  =>   元素节点
    // 属性      => 属性节点
    // 文本      => 文本节点
    // 注释      => 注释节点

    // 所有的节点都是对象类型

    // 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

    // window  -> document(子对象)  -> html -> body ->  ...
    // 1. html页面载入到浏览器中 会变为文档的一部分
    // 2. 通过文档(document)可以访问页面中所有的元素

    // console.log(window);
    // console.log(document);  // html页面载入到浏览器中 会变为文档的一部分
    // console.log(document.documentElement); // html


    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点
    // 根节点: 根（root）节点  没有父元素






</script>

</html>